
/*页面加载完成*/
window.onload = function () {

    /*头部搜索*/
    search();
    /*轮播图*/
    banner();
    /*倒计时*/
    downTime();
};
/*头部搜索*/
function search() {
    /*初始化 背景色全透明*/
    /*1、往下滚动  背景色逐渐加深
    * 2、滚动到一定距离  超过banner  颜色不再改变*/

    var header= document.querySelector(".jd_header_box");
    var banner = document.querySelector(".banner");
    var height = banner.offsetHeight;

    /*监听事件*/
    window.onscroll = function () {
        var top = document.body.scrollTop || document.documentElement.scrollTop;
        var opacity = 0;
        if(top > height) {
            opacity = 0.85
        } else {
            opacity = 0.85*(top/height);
        }
        header.style.background = "rgba(201,21,35," + opacity + ")";
    };


}
/*轮播图*/
function banner() {
    var banner = document.querySelector(".banner");
    var width = banner.offsetWidth; /*获取banner的宽度*/
    var imgBox = banner.querySelector("ul:first-child");/*图片盒子*/
    var pointBox = banner.querySelector("ul:last-child");/*点盒子*/
    var points = pointBox.querySelectorAll("li");/*所有的点*/

    /*公用方法*/
    /*添加过渡*/
    function addTransition() {
        imgBox.style.transition = "all 0.5s";
        imgBox.style.webkitTransition = "all 0.5s";
    }
    /*清除过渡*/
    function removeTransition() {
        imgBox.style.transition = "none";
        imgBox.style.webkitTransition = "none";
    }
    /*设置位置*/
    function setTransform(translateX) {
        imgBox.style.transform = "translateX("+ translateX +"px)";
        imgBox.style.webkitTransform = "translateX("+ translateX +"px)";
    }


    /*定时轮播*/
    var index = 1;
   var timerId =  setInterval(function () {
       index++;
       addTransition();

       setTransform(-index*width);
    },2000);

    itcast.transitionEnd(imgBox, function () {
        /*无缝滚动*/
        if(index >= 9) {
            index = 1;
            removeTransition();
            setTransform(-index*width);
        } else if(index <= 0) {
            index = 8;
            removeTransition();
            setTransform(-index*width);
        }
        setpoint();
    });
    /*点的样式做对应改变*/
    var setpoint = function () {
        for(var i = 0; i < points.length; i++) {
            points[i].classList.remove("now");/*清除所有的当前样式*/
        }
        points[index - 1].classList.add("now");/*给对应的元素添加样式*/
    }

    /*手指 触摸滑动时 轮播图也能随着滑动  停止轮播*/
    var startX = 0;
    var moveX = 0;
    var distanceX = 0; /*改变的距离*/
    var isMove = false; /*记录用户是佛滑动过*/

    imgBox.addEventListener("touchstart", function (e) {
        startX = e.touches[0].clientX; /*记录开始位置的坐标*/
        clearInterval(timerId);/*触摸事件开始   停止定时器*/
    });
    imgBox.addEventListener("touchmove", function (e) {
        moveX = e.touches[0].clientX;
        distanceX = moveX - startX;
        removeTransition();
        setTransform(-index*width + distanceX);/*当前的定位加上改变的距离  就是将要去做定位的距离*/

        isMove = true;
    });
    /*触摸结束事件  最好用window来监听*/
    window.addEventListener("touchend", function () {
        /*不超过一定距离  会吸附回去   超过一定距离  要跳转到上一张或下一张*/

        if(Math.abs(distanceX) > width/3 && isMove) {/* 超过一定距离  要跳转到上一张或下一张*/
            if(distanceX > 0) {
                index--;
            }else {
                index++;
            }
            addTransition();
            setTransform(-index*width);
        }else {  /*不超过一定距离  会吸附回去*/
            addTransition();
            setTransform(-index*width);
        }
        /*充置参数*/
        startX = 0;
        moveX = 0;
        distanceX = 0;
        isMove = false;

        clearInterval(timerId);/*排除定时器累加*/
        timerId =  setInterval(function () { /*触摸事件结束  开启定时器*/
            index++;
            addTransition();

            setTransform(-index*width);
        },2000);
    });




}
/*倒计时*/
function downTime() {
    /*获取所需元素*/
    /*盒子的时间*/
    var skTime = document.querySelector(".sk_time");
    /*每一个span*/
    var spans = skTime.querySelectorAll("span");
    /*假设一个时间*/
    var time = 4*60*60;

    var timerId = setInterval(function () {
        time--;
        if(time < 0) {
            return false;
        }
        /*格式化时间*/
        var h = Math.floor(time/3600);
        var m = Math.floor(time%3600/60);
        var s = time%60;
        spans[0].innerHTML = Math.floor(h/10);
        spans[1].innerHTML =h%10;

        spans[3].innerHTML = Math.floor(m/10);
        spans[4].innerHTML =m%10;

        spans[6].innerHTML = Math.floor(s/10);
        spans[7].innerHTML =s%10;
    },1000);

}
